import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
var _excluded = ["mode", "popoverProps"];
import { jsx as _jsx } from "react/jsx-runtime";
import { SketchPicker } from '@chenshuai2144/sketch-color';
import { ConfigProvider, Popover } from 'antd-v4';
import useMergedState from "rc-util/es/hooks/useMergedState";
import { useContext } from 'react';
export var DEFAULT_COLORS = ['#FF9D4E', '#5BD8A6', '#5B8FF9', '#F7664E', '#FF86B7', '#2B9E9D', '#9270CA', '#6DC8EC', '#667796', '#F6BD16' // 9 - 黄色
];

var ColorPicker = function ColorPicker(_ref) {
  var mode = _ref.mode,
      popoverProps = _ref.popoverProps,
      rest = _objectWithoutProperties(_ref, _excluded);

  var _useContext = useContext(ConfigProvider.ConfigContext),
      getPrefixCls = _useContext.getPrefixCls;

  var prefixCls = getPrefixCls('pro-field-color-picker');

  var _useMergedState = useMergedState('#1890ff', {
    value: rest.value,
    onChange: rest.onChange
  }),
      _useMergedState2 = _slicedToArray(_useMergedState, 2),
      color = _useMergedState2[0],
      setColor = _useMergedState2[1];

  var readDom = _jsx("div", {
    className: prefixCls,
    style: {
      padding: 5,
      width: 48,
      border: '1px solid #ddd',
      borderRadius: '2px',
      cursor: 'pointer'
    },
    children: _jsx("div", {
      style: {
        backgroundColor: color,
        width: 36,
        height: 14,
        borderRadius: '2px'
      }
    })
  });

  if (mode === 'read') {
    return readDom;
  }

  return _jsx(Popover, _objectSpread(_objectSpread({
    trigger: "click",
    placement: "right"
  }, popoverProps), {}, {
    content: _jsx("div", {
      style: {
        margin: '-12px -16px'
      },
      children: _jsx(SketchPicker, _objectSpread(_objectSpread({}, rest), {}, {
        presetColors: rest.colors || rest.presetColors || DEFAULT_COLORS,
        color: color,
        onChange: function onChange(_ref2) {
          var hex = _ref2.hex,
              _ref2$rgb = _ref2.rgb,
              r = _ref2$rgb.r,
              g = _ref2$rgb.g,
              b = _ref2$rgb.b,
              a = _ref2$rgb.a;

          if (a && a < 1) {
            setColor("rgba(".concat(r, ", ").concat(g, ", ").concat(b, ", ").concat(a, ")"));
            return;
          }

          setColor(hex);
        }
      }))
    }),
    children: readDom
  }));
};
/**
 * 颜色组件
 *
 * @param FieldColorPicker {
 *     text: number;
 *     moneySymbol?: string; }
 */


var FieldColorPicker = function FieldColorPicker(_ref3) {
  var text = _ref3.text,
      type = _ref3.mode,
      render = _ref3.render,
      renderFormItem = _ref3.renderFormItem,
      fieldProps = _ref3.fieldProps;

  if (type === 'read') {
    var dom = _jsx(ColorPicker, {
      value: text,
      mode: "read"
    });

    if (render) {
      return render(text, _objectSpread({
        mode: type
      }, fieldProps), dom);
    }

    return dom;
  }

  if (type === 'edit' || type === 'update') {
    var _dom = _jsx(ColorPicker, _objectSpread({}, fieldProps));

    if (renderFormItem) {
      return renderFormItem(text, _objectSpread({
        mode: type
      }, fieldProps), _dom);
    }

    return _dom;
  }

  return null;
};

export default FieldColorPicker;